import Base from "../base.js";
import MoviesApi from "../../api/movies.js"

const moviesPoesterLeft = [
    {name:"电影名称",key: "name" }, 
    {name:"电影英文", key: "ename"},
    {name:"电影类型",key: "type"},
    {name:"首映地区",key: "area"},
    {name:"电影时长",key: "time"},
    {name: "是否经典",key: "isClassic"},
    {name:"上映时间",key: "upDate"},
    {name:"电影评分",key: "score"},
    {name:"电影票房",key: "count"},

];

const moviesPoesterRight = [
   
    {name: "电影导演",key: "director"},
    {name: "电影演员",key: "actor"},
    {name:"电影简介",key: "intro"}  ,
];
export default class extends Base {
    //建立默认数据
    data = {
        movie: {
            _id: "",
            name: "一条狗的使命",
            ename: "ADog'sPurpose",
            type: "治愈",
            area: "美国",
            time: 60,
            upDate: "2017年4月30",
            score: "78.5",
            count: "3695",
            intro: "一条狗的使命",
            isClassic: true,
            director: "张三",
            actor: "李四",
        },
    };

    render() {
        const {
            movie
        } = this.data;
        this.$el.html(`
        <div style="margin-top:2px;">
        <a href="#/info/movies" style="font-size:16px;">电影列表</a><i class="layui-icon layui-icon-right" style="font-size: 16px; color: #c2c2c2;"></i>   
         <a href="/#/info/add-movies" style="font-size:16px;">新增电影</a><i class="layui-icon layui-icon-right" style="font-size: 16px; color: #c2c2c2;"></i> 
         </div>
        <div>
          <h1 style="width:200px;margin:auto;font-size:40px;font-weight:bold; padding:20px">新 增 电 影</h1>     
            <table style="font-size:20px;width:1200px;margin:40px auto;display:flex;">
                <tbody>
                    ${moviesPoesterLeft.map(item => {
                        if (item.key === "isClassic") {
                          return `<tr>
                                <td style="text-align:center;font-size:26px;padding:0 20px 0 159px"><label>${item.name}</label></td>
                                <td>
                                    <div style="margin:10px;font-size:22px;">
                                       是<input type="radio" name="${item.key}"value=true  style="margin:10px">
                                       否<input type="radio"name="${item.key}" value=false style="margin:10px">
                                    </div>
                                </td>
                         </tr> `
                        }else{
                               return `<tr>
                                    <td style="text-align:center;font-size:26px;padding:0 20px 0 159px">${item.name}</td>
                                      <td>
                                      <input type = "text"value = "${movie[item.key]}"name = "${item.key}" style="margin:7px;padding:5px;width:240px"">
                                    </td>
                               </tr>`
                            }
                    }).join("")}    
                </tbody>
                <tbody style="margin-left:60px">
                ${moviesPoesterRight.map(item => { 
                    if (item.key == "intro") {
                        return `
                           <tr>
                             <td style="text-align:center;font-size:26px;padding-right:20px;margin-right:9px"><span>${item.name}<span/></td>
                               <td style="margin-left:9px"> 
                                 <textarea name="${item.key}" lay-verify="required" placeholder="请输入文本" class="layui-textarea" style="padding:20px 5px;position:relative;left:7px;top:11px;font-size:14px;height:342px;width:257px;border:1px solid black"></textarea>
                              <td/> 
                           </tr>
                           `
                       }      
                           return `<tr>
                                <td style="text-align:center;font-size:26px;padding-right:20px;">${item.name}</td>
                                  <td>
                                  <input type = "text" value = "${movie[item.key]}"name = "${item.key}" style="margin:7px;padding:5px;width:240px">
                                </td>
                           </tr>`
                        }
                ).join("")}
                </tbody>
            </table> 

             <div style="width:400px;margin:30px auto;">        
            <td><button class="save-btn layui-btn"><i class="layui-icon">&#xe654;新增电影</i> </button></td> 
            <td><button class="upload-btn layui-btn layui-btn-warm" style="margin-left:126px"><i class="layui-icon">&#xe654;上传图片</i></button></td>
            </div> 
         </tr> 
        </div>
        `);
    };
    // 上传海报
    upload() {
        // console.log(this.data.movie._id);
        //跳转到上传电影图片页面,将需要上传图片电影的id携带至上传的页面     
        location.hash = `#/info/uploadMovies/${this.data.movie._id}`;
    }

    // 新增电影
    async add() {
        //解构默认数据
        const {
            name,
            ename,
            type,
            area,
            time,
            upDate,
            score,
            count,
            intro,
            isClassic,
            director,
            actor
        } = this.data.movie;
        console.log(name,
            ename,
            type,
            area,
            time,
            upDate,
            score,
            count,
            intro,
            isClassic,
            director,
            actor);
        // //调用MoviesApi.addMovie发送请球
        const data = await MoviesApi.addMovie({
            name,
            ename,
            type,
            area,
            time,
            upDate,
            score,
            count,
            intro,
            isClassic,
            director,
            actor
        });
        if (data) {
            this.data.movie = data;
            window.alert("添加成功")
        }else{
            window.alert("电影名已经存在了，换个名字试试")
        }
    };

    // 添加事件
    handle() {
        const {
            movie
        } = this.data;
        _.map(movie, (v, k) => {
            
            $(`input[name=${k}]`).on("input", e => {
                // 每次输入拿到最新的值 在交给movie对象
                this.data.movie[k] = e.target.value;
                // console.log(e.target.value);
            });
            $(`textarea[name=${k}]`).on("input", e => {
                // 每次输入拿到最新的值 在交给movie对象
                this.data.movie[k] = e.target.value;
                console.log(e.target.value);
            });
  
        });
        // 获取新增电影按钮
        $(".save-btn").on("click", this.add.bind(this));
        //获取上传海报按钮
        $(".upload-btn").on("click", this.upload.bind(this));
    };

};